<template>
	<view class="content">
		<!-- <view>
			养犬人姓名
			<text class="huang">※</text>
		</view>
		<input type="text" v-model="name" placeholder="请输入养犬人姓名" />
		<view>
			原主人手机号
			<text class="huang">※</text>
		</view>
		<input type="text" v-model="phoneNum" placeholder="请输入原主人手机号" />
		<view>
			验证码
			<text class="huang">※</text>
		</view>
		<view class="row">
			<input type="text" v-model="verificationCode" placeholder="请输入手机号验证码" />
			<button type="primary">验证码</button>
		</view> -->

		<view>
			犬只ID
			<text class="huang">※</text>
		</view>
		<input type="text" v-model="dogId" @focus="isShow = false" placeholder="请输入犬只ID" />
		<view class="btn"><button type="default" @tap="go" style="background-color:#fcd700;">查询</button></view>

		<view v-show="isShow" class="">
			<view style="display: flex;align-items: center;">
				<text class="text">原主人手机号:</text>
				{{ oldPhone }}
				<button @tap="faMa" v-show="isFa" style="font-size: 26upx;width: 200upx;height: 60upx;line-height: 60upx;" type="primary">发送验证码</button>
				<button v-show="!isFa" style="font-size: 26upx;width: 200upx;height: 60upx;line-height: 60upx;" disabled>{{ miao }}秒</button>
			</view>
			<view style="display: flex;align-items: center;">
				<text class="text">验证码：</text>
				<input style="width:30%;display: inline-block;" type="number" v-model="ma" placeholder="请输入验证码" />
			</view>
			<button @tap="next" type="primary" style="background-color:#fcd700;">下一步</button>
		</view>
	</view>
</template>

<script>
import CHONG from '../../static/js/function.js';
import { mapState, mapMutations } from 'vuex';
export default {
	computed: mapState(['URL']),
	data() {
		return {
			dogId: '',

			isFa: true,
			miao: 59,
			ma: '',
			bizId: '',
			oldPhone: '',
			isShow: false
		};
	},
	methods: {
		faMa() {
			this.isFa = false;
			let timer = setInterval(() => {
				this.miao--;
				if (this.miao === 0) {
					clearInterval(timer);
					this.isFa = true;
					this.miao = 59;
				}
			}, 1000);
			uni.request({
				url: this.URL + 'Sendchecked',
				data: {
					telephone: this.oldPhone
				},
				success: res => {
					console.log('返回的验证码');
					console.log(res.data);
					if (res.data.success) {
						this.bizId = res.data.data[0].bizId;
					} else {
						CHONG.tip('网路错误，请稍后再试');
					}
				}
			});
		},
		go() {
			CHONG.tip('查询中', 0);
			if (!this.dogId) {
				CHONG.tip('请填写犬只ID', 1);
				return;
			}
			uni.request({
				url: this.URL + 'findByDogId',
				data: {
					dogId: this.dogId
					// dogId: 13010200200003,//公司
					// dogId: 13010200100009,//个人
				},
				success: res => {
					uni.hideLoading();
					console.log(res.data);
					if (res.data.success) {
						if (res.data.data[0].status === 0) {
							this.isShow = true;
							console.log(res.data.data[0].phone);
							this.oldPhone = res.data.data[0].phone;
							console.log(this.oldPhone);
							uni.setStorage({
								key: 'xinXi',
								data: res.data.data[0],
								success: res => {
									console.log('存上了');
								}
							});
						} else {
							CHONG.tip('这只狗狗不能进行过户操作');
						}
					} else {
						CHONG.tip(res.data.msg);
					}
				}
			});
		},
		next() {
			if (!this.ma) {
				CHONG.tip('请输入验证码');
				return;
			} else if (this.ma.length !== 4) {
				CHONG.tip('验证码不正确');
				return;
			} else {
				uni.request({
					url: this.URL + 'Msgchecked',
					data: {
						bizId: this.bizId,
						telephone: this.oldPhone,
						checkNo: this.ma
					},
					success: res => {
						console.log('提交验证码了');
						console.log(res.data);
						if (res.data.success) {
							this.gogo();
						} else {
							CHONG.tip('网络错误请稍后再试');
						}
					}
				});
			}
		},
		gogo() {
			uni.redirectTo({
				url: './transfer'
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	font-size: 26upx;
	padding: 20upx;
	input {
		color: $chong-text-color;
		font-size: 24upx;
		margin: 10upx 0;
		padding: 4upx 20upx;
		border: {
			radius: 10upx;
			style: solid;
			width: 1upx;
			color: rgba($chong-text-color, 0.2);
		}
		background: white;
	}
	.row {
		display: flex;
		align-items: center;
		input {
			flex: 1;
		}
		button {
			line-height: 60upx;
			min-width: 200upx;
			height: 60upx;
			font-size: 26upx;
		}
	}
	.btn {
		padding: 50upx 0;
		margin: 0 140upx;
	}
	.huang {
		color: $chong-iconbg-color;
	}
}
</style>
